<template>
<div class="store-table">
  <table class="table head">
    <colgroup>
      <col class="col" v-for="{ width, label } in table.head" :key="label" :style="{ width: width + 'px' }" />
    </colgroup>
    <thead>
      <tr class="tr">
        <th class="th" v-for="{ label } in table.head" :key="label">
          <div class="content">
            {{ label }}
          </div>
        </th>
      </tr>
    </thead>
  </table>

  <div class="body-wrapper">
    <!-- <VueSeamlessScroll style="height: 100%; overflow: hidden" :data="table.data" v-bind="seamlessScrollOption"> -->
    <table class="table body">
      <colgroup>
        <col class="col" v-for="{ width, label } in table.head" :key="label" :style="{ width: width + 'px' }" />
      </colgroup>
      <tbody>
        <tr class="tr" v-for="(d, index) in table.data" :key="index" @mouseenter="table.mouseenter(d.name)"
          @mouseleave="table.mouseleave(d.name)">
          <td class="td" v-for="{ prop, locate } in table.head" :key="prop">
            <template v-if="prop === 'serialNumber'">
              <div class="content">
                {{ index + 1 }}
                <!-- <div class="serial-number"> {{ index + 1 < 10 ? `0${index + 1}` : index + 1 }} </div> -->
              </div>

            </template>
            <template v-else-if="prop === 'locate'">
              <div class="content" @click="locate(d.coord)">
                <el-icon>
                  <Location />
                </el-icon>
              </div>
            </template>

            <template v-else>
              <div class="content">
                {{ d[prop] }}
              </div>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- <div class="interval-row"></div> -->
    <!-- </VueSeamlessScroll> -->
  </div>
</div>
</template>
<script>

const doorDict = [
  '关闭',
  '开启',
  '故障',
  '掉线',
]
export const repositoryTableData = Array(12).fill().map((_, index) => {
  const { longitude, latitude, height } = repositoryCoords[index]
  const cartographicArray = [longitude, latitude, height]
  return {
    name: '库室' + (index + 1),
    oil: '0.1%',
    oxygen: '20.9%',
    temperature: '25°C',
    humidity: '50%',
    door: doorDict[Math.floor(Math.random() * doorDict.length)],
    coord: repositoryCoords[index],
    cartographicArray,
    cartesian3: Cesium.Cartesian3.fromRadians(longitude, latitude, height)
  }
})
</script>
<script setup>
import * as Cesium from 'cesium'
import repositoryCoords from '../../../views/mock-data/repositoryCoords.json'
import { reactive, onBeforeUnmount } from 'vue'
import { Repository, flyToPoints } from '../../../views/cesium-map/repository.js'
import { Tween } from '@tweenjs/tween.js'
import { waitUntilValueExist } from '../../../utils/unsorted'
import { tweenGroupAlongCesium } from '../../../views/cesium-map/index-cesium-map.js'

const table = reactive({
  data: [],
  head: [
    {
      prop: 'serialNumber',
      label: '序号',
      width: 40,
    },
    {
      prop: 'name',
      label: '名称',
      // width: 60,
    },
    {
      prop: 'oil',
      label: '油气浓度',
      width: 60,
    },
    {
      prop: 'oxygen',
      label: '氧气浓度',
      width: 60,
    },
    {
      prop: 'temperature',
      label: '温度',
      width: 50,
    },
    {
      prop: 'humidity',
      label: '湿度',
      width: 50,
    },
    {
      prop: 'door',
      label: '安全门',
      width: 50,
    },
    {
      prop: 'locate',
      label: '定位',
      width: 50,
      locate({ longitude, latitude, height }) {
        cesiumViewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(
          Cesium.Cartesian3.fromRadians(longitude, latitude, height)
        ), {
          offset: new Cesium.HeadingPitchRange(0, -Math.PI / 4, 5000),
          duration: 1,
        })

      },
    }
  ],

  fetchData() {
    // 开启，关闭， 故障，掉线



    Promise.resolve(repositoryTableData)
      .then((data) => {
        if (data) {
          table.data = data
          const cartesian3Array = data.map((item) => {
            const { longitude, latitude, height } = item.coord
            return Cesium.Cartesian3.fromRadians(longitude, latitude, height)
          })

          window.tempCartesian3Array = cartesian3Array

          waitUntilValueExist(() => window.cesiumViewer).then(() => {
            Repository.instance = new Repository().create(data)
            flyToPoints(cartesian3Array)
          })


        } else {
          table.data = []
        }
      })
      .catch((err) => {
        table.data = []
      })
  },

  setup() {
    this.fetchData()
    const clearIntervalId = setInterval(
      () => {
        this.fetchData()
      },
      1000 * 60 * 5,
    )
    onBeforeUnmount(() => {
      clearInterval(clearIntervalId)
    })
  },
  addEntityAnimation(entity, [scaleStart, scaleEnd]) {
    entity.tween = new Tween({ scale: scaleStart })
      .to({ scale: scaleEnd }, 200)
      .onUpdate(({ scale }) => {
        entity.billboard.scale = Cesium.Math.lerp(scaleStart, scaleEnd, (scale - scaleStart) / (scaleEnd - scaleStart))
      })
      .onComplete(() => {
        entity.tween = tweenGroupAlongCesium.remove(entity.tween)
      })
      .start()

    tweenGroupAlongCesium.add(entity.tween)
  },
  mouseenter(name) {
    if (!window.cesiumViewer) return
    if (!Repository.instance) return
    const { dataSource } = Repository.instance.ml
    const entity = dataSource.entities.values.find(entity => entity.name === name)
    entity.billboard.color = new Cesium.Color(1.0, 1.0, 0, 1)
    if (entity.tween) {
      entity.tween.stop()
      entity.tween = tweenGroupAlongCesium.remove(entity.tween)
    }
    this.addEntityAnimation(entity, [1, 1.2])
  },
  mouseleave(name) {
    if (!window.cesiumViewer) return
    const { dataSource } = Repository.instance.ml
    const entity = dataSource.entities.values.find(entity => entity.name === name)
    entity.billboard.color = new Cesium.Color()
    if (entity.tween) {
      entity.tween.stop()
      entity.tween = tweenGroupAlongCesium.remove(entity.tween)
    }
    this.addEntityAnimation(entity, [1.2, 1])
  }
})

table.setup()

</script>

<style lang="scss" scoped>
@use '../../../assets/styles/common/_util.scss' as util;


.store-table {
  height: 100%;
  --tr-content-height: 30px;
  --tr-height: calc(var(--tr-content-height) + var(--tr-padding-top, 0px));
  font-family: MicrosoftYaHei;
  // todo
  font-size: 14px;


  .table {

    table-layout: fixed;
    border-spacing: 0px;

    .th,
    .td {
      padding: 0;

      .content {
        height: 100%;
        @include util.ellipsis;
        display: grid;
        place-items: center;
      }
    }

    &.head {
      width: 100%;
      padding-right: 8px;

      .th {

        height: var(--tr-content-height);
        font-weight: normal;
        font-stretch: normal;
        // color: #a5e9fb;
        // background-color: rgba(0, 101, 142, 0.59);
      }
    }

    &.body {
      width: 100%;

      .tr:nth-child(even) {
        background-color: var(--row-stripe-bg-color);
      }


      .td {
        height: var(--tr-height);
        cursor: pointer;
        // padding: 0;
        padding-top: var(--tr-padding-top);
      }


      .tr:hover {
        .td {
          color: #f6ac63;
        }
      }
    }
  }

  .body-wrapper {
    // --row-length: v-bind(rowLength);
    // height: calc(var(--tr-height) * var(--row-length));
    height: calc(100% - var(--tr-content-height));
    scrollbar-gutter: stable;
    overflow-y: hidden;

    &:hover {
      overflow-y: auto;
    }

    over-s .interval-row {
      height: var(--tr-height);
    }
  }

}
</style>
